Resolve the conflict of rendering markers {{}} of double curly braces between vue and node template engines
- 2021-08-16 22:56:35
- OfStack
As a result of previous practice koa2, direct rendering of jquery is written on the traditional page.
This time, I want to be lazy. I directly introduced script into vue, and found that I couldn't render data value.
The rendering engine uses xtpl. After searching for half a day, I didn't find that I can modify the configuration of xtpl rendering separator
vue has!
var myVue = new Vue({
el: '#msgBoard',
delimiters:['$$','$$'],
data() {
return {
msg: {
num: 10
}
}
},
mounted() {
console.dir(this)
},
})
Additional knowledge: Front End--Template Renderer {{}} Conflict Resolution for vue and nunjucks
Because the rendering technology of nunjucks is used on thinkjs, when we know vue, we find that vue also uses {{}} to identify template codes.
I found an vue html code and put it on thinkjs to run, and found that the data could not be bound. Then go online and find the following solutions:
Modify the identifier for vue by adding {% raw%}, {% endraw%}, as follows:
{% raw %}{{result.name}}{% endraw %}
Problem solving.